<template>
<div>
	<div class="bang">
			
	</div>
    <div class="h-header">
    	<router-link to="/user" tag="div" class="s-w">
    	</router-link>
    	<li>{{tit}}</li>
    </div>
    <div class="h-top">
    	<div class="h-banner">
    		<mt-swipe :auto="4000">
            	<mt-swipe-item><img class="img" src="../../../static/06.jpg"/></mt-swipe-item>
            	<mt-swipe-item><img class="img" src="../../../static/07.jpg"/></mt-swipe-item>
            	<mt-swipe-item><img class="img" src="../../../static/05.jpg"/></mt-swipe-item>
          </mt-swipe>
	    </div>
	    <div class="h-nei">
		    <ul>
		    	<li>
			    	<span><img class="img" src="../../../static/05.jpg"/></span>
			    	<p>我的积分</p>
		    	</li>
		    	<li>
			    	<span><img class="img" src="../../../static/05.jpg"/></span>
			    	<p>每日签到</p>
		    	</li>
		    	<li>
			    	<span><img class="img" src="../../../static/05.jpg"/></span>
			    	<p>我的奖品</p>
		    	</li>
		    </ul>	    	
	    </div>
	</div>
   
    <div class="h-list" id="shiy">
    	<ul>
    		<li class="h-b-te">
    			时光会员 专享好货
    		</li>    		
    		<li  v-for="(item, i) in list" :key="i">
    			<div class="h-tu" >
					<img class="img" :src="item.pimg" />
				</div>
				<router-link tag="li" :to="'/details/'+item.pid" class="h-desc">
					<span>{{item.pname}}</span>
					<p>efas</p>
					<p>￥{{item.pid}}</p>
				</router-link>
    		</li>
    	</ul>    	
    </div>
 </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'Hui',
    data(){
        return{	
            tit:'我 的会员',
            list: "",
        }
    },
    mounted() {
        this.$emit('toparent',this.tit)        		
	    var _this=this
	    axios({
	        method:'get',
	        url:"http://jx.xuzhixiang.top/ap/api/productlist.php",
	        params:{uid:'11475'}
	    }).then(function(data){
	          _this.list=data.data.data
	    })
   
//			axios({
//				method:'get',
//				url:'http://10.8.155.15:8080/baby/userLogin.do',
//				params:{
//					username:_this.ipt,
//					password:_this.ipt1,
//				}
//			}).then(function(data){
//				console.log(data.data)
//				
//			})       
    },
}
</script>

<style scoped>
.bang{
background: blanchedalmond;
width:100%;
height: 3.67rem;
}

.img{
	height: 100%;
	width: 100%;
}

.mint-swipe-item {
      background-color: #99a9bf;
}
	
.h-header{
position: relative;
width: 100%;
height: 3.5rem;
line-height: 3.5rem;
background-color: rgba(232, 231, 231, 1);
text-align: center;
font-size: 1.4rem;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
}
.h-header li{
width: 11.92rem;
height: 3.5rem;
color: rgba(100, 100, 100, 1);
font-size: 1.4rem;
line-height: 3.5rem;
}


.s-w{
position: absolute;
left: 1rem;
top: 1rem;
width: 1.25rem;
height: 1.25rem;
background:red;
}

.h-top{
height: 23.33rem;
width: 100%;
position: relative;
}
.h-banner{
width: 100%;
height: 16.67rem;
background: #eee;
}

.h-nei{
width: 29.25rem;
height: 8.33rem;
border-radius: 1rem;
overflow: hidden;
background: #FFFAE8;
position: absolute;
top:15rem;
left: 1rem;
}

.h-nei ul{
width: 29.25rem;
height: 8.33rem;
line-height: 1.67rem;
text-align: center;
display: flex;
justify-content: space-around;
align-items: center;
}

.h-nei li{
height: 8rem;
width: 7.83rem;
display: flex;
flex-wrap:wrap;
padding:1rem 0;
justify-content: space-around;
align-items: center;
box-sizing: border-box;	
}

.h-nei li span{
width: 4.17rem;
height: 4.17rem;
background: black;
border-radius:0.67rem ;
overflow: hidden;
}

.h-nei li p{
width: 7.83rem;
height: 2.5rem;
line-height: 2.5rem;
color: rgba(102, 102, 102, 1);
font-size: 1.17rem;
text-align: center;
font-family: Microsoft Yahei;
}


#shiy{
width: 100%;
height: 37rem;
overflow: auto;
}

.h-list ul{
background:#F5F7FA;;
width: 100%;
display: flex;
flex-wrap:wrap;
padding: 0 1rem;
justify-content: space-between;
align-items: center;
box-sizing: border-box;

}

.h-list .h-b-te{
width: 100%;
height: 2.5rem;
background-color: rgba(255, 255, 255, 0);
color: rgba(102, 102, 102, 1);
font-size: 1.5rem;
text-align: center;
line-height: 2.5rem;
font-family: Microsoft Yahei;
}

.h-list li{
width: 12.5rem;
height: 18rem;
color: rgba(16, 16, 16, 1);	
}

.h-list li .h-tu{
width: 12.5rem;
height: 12.5rem;
border-radius: 0.67rem;
background-color: rgba(230, 230, 230, 1);
}
.h-desc{
overflow:hidden;
width: 12.5rem;
margin-top: 0.4rem;
line-height: 1.rem;
text-align: left;
font-family: Arial;
text-indent: 1rem;
}
.h-desc span{
height: 100%;
color: rgba(102, 102, 102, 1);
font-size: 1.17rem;
font-family: Microsoft Yahei;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap	
}

.h-desc p{
color: rgba(189, 189, 189, 1);
font-size: 1rem;
font-family: Microsoft Yahei;
}   
</style>
